<template>
	<div class="picbookList">
		<div class="listMain" v-if="!variable.isMp">
			<div class="bookMain" ref="bookMain">
				<Nav @vipEntry="vipEntry" />
				<div class="leftBorder"></div>
				<div class="bb-custom-wrapper wrapper" @touchstart="start" @touchmove="move" @touchend="end">
					<div id="bb-bookblock" class="bb-bookblock main">
						<div class="bb-item main" v-for="(item, index) in vipPicbookList" :key="index">
							<div class="picbookMain">
								<img :src="item.homeImageUrl" />
								<div class="border"></div>
								<div class="title">
									{{ item.name }}
									<div class="icon-free" v-if="item.vipFreeType !== 0"></div>
								</div>
							</div>
							<div class="bottom">
								<div class="audio">
									<div :ref="'playIcon' + index" @touchend="picbookAudio(item, index)"></div>
								</div>
								<div class="start" @touchend="picbookTouch(item)">进入绘本</div>
							</div>
							<div class="next" @touchend="next"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 小程序进入  -->
		<div class="routine" v-if="variable.isMp">
			<v-touch class="start-experience" @tap="experienceTouch"></v-touch>
		</div>
		<Vip ref="vip" />
		<SeedActivity @picbookTouch="picbookTouch" />
		<LoadPicbook ref="loadPicbook" />
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Nav from './recommendNav.vue'
import LoadPicbook from './loadPicbook.vue'
import SeedActivity from './seedActivity.vue' //种子用户活动组件
import Vip from '../common/vip.vue'
export default {
	data() {
		return {
			book: null,
			moveX: 0,
			isPressSwiper: false
		}
	},
	components: {
		Nav,
		LoadPicbook,
		SeedActivity,
		Vip
	},
	mounted() {
		this.$nextTick(() => {
			// eslint-disable-next-line no-undef
			this.book = $('#bb-bookblock')
			this.book.bookblock({
				speed: 800,
				shadowSides: 0.8,
				shadowFlip: 0.7,
				circular: true,
				current: this.recommendPage,
				shadows: true,
				onEndFlip: (old, page) => {
					this.setRecommendPage(page)
				}
			})
		})
	},
	computed: {
		...mapGetters('seedActivityStatus', {
			seedActivity: 'getSeedActivity',
			seedPicbook: 'getSeedPicbook',
			isSeedEntery: 'getIsSeedEntery'
		}),
		...mapGetters('picbookListStatus', {
			picbookList: 'getPicbookList',
			recommendPage: 'getRecommendPage',
			vipPicbookList: 'getVipPicbookList'
		}),
		...mapGetters('personalStatus', {
			userVip: 'getUserVip'
		})
	},
	methods: {
		//小程序进入绘本
		experienceTouch() {
			this.setIsSeedEntery(true)
			//清空推荐绘本
			this.deleteSeedPicbook()
			//随机推荐一本绘本
			const picbookId = parseInt(Math.random() * this.seedActivity.picbookIds.length),
				seedPicbook = this.picbookList.filter(item => {
					return item.id === this.seedActivity.picbookIds[picbookId]
				})
			this.picbookTouch(seedPicbook[0])
			this.setSeedPicbook(seedPicbook[0].id)
		},

		//点击vip图标  右上角图标
		vipEntry: function() {
			this.$refs.vip.vipShowTouch()
		},
		//点击进入绘本
		picbookTouch: async function(item) {
			this.touchMusic()
			this.parseTextAudio({
				text: item.name,
				speaker: item.detail.speaker
			})
			//操作之后再次返回就会出现活动弹窗
			this.parseTextAudio({ play: false })
			this.$refs.loadPicbook.loadPicbook({
				picbookId: item.id,
				beforeRouter: 'recommendList'
			})
		},
		//点击播放绘本音频
		picbookAudio: function(item, index) {
			this.clickMusic()
			const ref = 'playIcon' + index
			const explain = item.detail.introduction.substring(5, item.detail.introduction.indexOf('\n'))
			this.$refs[ref][0].style.transform = 'scale(1.1)'
			this.parseTextAudio({
				text: item.name,
				speaker: item.detail.speaker,
				end: () => {
					this.parseTextAudio({
						text: explain,
						speaker: item.detail.speaker,
						end: () => {
							this.$refs[ref][0].style.transform = 'scale(1)'
						}
					})
				}
			})
		},
		start: function(event) {
			this.moveX = event.changedTouches[0].clientX
		},
		move: function(event) {
			if (this.isPressSwiper) return
			if (event.changedTouches[0].clientX - this.moveX < -50) {
				this.bookMusic()
				this.book.bookblock('next')
				this.parseTextAudio({ play: false })
				this.isPressSwiper = true
			}
			if (event.changedTouches[0].clientX - this.moveX > 50) {
				this.bookMusic()
				this.book.bookblock('prev')
				this.parseTextAudio({ play: false })
				this.isPressSwiper = true
			}
		},
		end: function() {
			this.moveX = 0
			this.isPressSwiper = false
		},
		next: function() {
			this.bookMusic()
			this.book.bookblock('next')
		},
		...mapActions('picbookListStatus', ['setRecommendPage']),
		...mapActions('seedActivityStatus', ['setSeedPicbook', 'setIsSeedEntery', 'deleteSeedPicbook']),
		...mapActions('mainStatus', ['setPopup'])
	}
}
</script>

<style scoped lang='stylus'>
.picbookList
	width 100%
	height 100%
	position absolute
	z-index 97
	background url($urlTitle + 'newList/首页.png') 0 0 / 100% 100%

	.listMain
		position absolute
		width 100vw
		height 100vh
		transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0px)

		.bookMain
			background url($urlTitle + 'newList/书本背景.png') 0 0 / 100% 100%
			width 152vh
			height 80vh
			margin 18vh auto 0 auto
			max-width 90vw
			max-height 55vw
			min-width 75vw
			position relative

			.leftBorder
				background url($urlTitle + 'newList/圆环.png') 0 0 / 100% 100%
				$coord('WHLT', 7%, 75%, -2.2%, 10%)
				z-index 99

			.wrapper
				$coord('WHLT', 95.6%, 95.5%, 1%, 0.5%)
				z-index 98

				.main
					position absolute
					width 100%
					height 100%
					border-radius 1rem 1rem 5% 1rem
					overflow hidden
					background transparent !important

					.picbookMain
						$coord('WHLT', 100%, 75%, 0%, 0%)
						overflow hidden

						img
							width 100%
							height auto
							position absolute
							bottom -3rem
							left 0

						.border
							background url($urlTitle + 'newList/白色虚线.png') 0 0 / cover
							$coord('WHLT', 97%, 100%, 1.5%, 4%)

						.title
							background url($urlTitle + 'newList/标题.png') 0 0 / 100% 100%
							$coord('WHRT', 8rem, 2.7rem, 0rem, 3rem)
							font-size 1rem
							$alignCenter()
							color white
							text-indent 0.3rem
							padding 0 1rem
							box-sizing border-box
							min-width 5rem
							width auto

							.icon-free
								$coord('WHRT', 2.2rem, 2.1rem, -0.1rem, -1.5rem)
								background url($urlTitle + 'icon/免费.png') center center / contain no-repeat

					.bottom
						$coord('WHLB', 100%, 25%, 0, 0)
						background rgb(250, 245, 230)
						border-radius 0 0 5% 1rem

						.audio
							$coord('WHLT', 4.5rem, 4.5rem, 4rem, -1rem)
							background rgb(250, 245, 230)
							box-shadow -1px -1px 1px rgba(0, 0, 0, 0.02)
							border-radius 50%

							div
								background url($urlTitle + 'icon/icon-语音.png') 0 0 / 100% 100%
								transition all 0.3s
								$coord('WHLT', 3rem, 3rem, 0.75rem, 0.85rem)

						.start
							background url($urlTitle + 'newList/按钮背景.png') 0 0 / 100% 100%
							position absolute
							$center('WHLT', 5.5rem, 2.2rem)
							font-size 0.9rem
							color white
							$alignCenter()
							letter-spacing 0.1rem

					.next
						background url($urlTitle + 'newList/右下角翻页角.png') 0 0 / 100% 100%
						$coord('WHRB', 20%, 30%, 0%, 0.1%)

	.routine
		$coord('WHLT', 100%, 100%, 0, 0)
		background url($urlTitle + 'newList/小程序背景.png') 0 0 / 100% 100%
		z-index 99

		.start-experience
			position absolute
			$center('WHLT', 10rem, 5rem)
			top 80%
			background url($urlTitle + 'newList/开始体验.png') center center / contain no-repeat
</style>
